<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑名单用户</title>
    <link rel="stylesheet" href="../css/hmdyh_nav.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
    <script src='../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js'></script>
    <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href="../css/hmdyh.css">
    <script src='../javascript/nav.js'></script>
    <link rel="stylesheet" href="../css/font_sbdceyn3aud/iconfont.css">
    <script src="../javascript/hmdyh_data.js"></script>
    <script src="../javascript/hmdyh.js"></script>
</head>
<body>
  <div id="naviga">
    <div id='logo'>
      <img src="../image/logo.png" alt="">
    </div>
    <ul id="tushu" class="menu">
      <li>图书管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page1'>还书管理</li>
      <li page-data='page2'>借阅管理</li>
      <li page-data='page3'>新书入库</li>
      <li page-data='page4'>超期还书</li>
      <li page-data='page5'>销书管理</li>
      <li page-data='page6'>图书状态</li>
    </ul>
    <ul id="user" class="menu">
      <li>用户管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page7'>用户信息</li>
      <li page-data='page8'>黑名单用户</li>
      <li page-data='page9'>借阅记录</li>
      <li page-data='page10'>催还提醒</li>
    </ul>
  </div>
  <div id='top'>
    <div id='shot'>
      <img src="../image/touxiang2.png" alt="">
      <span id="name">
        叶小刀
      </span>
      <span class="iconfont icon-xiala"></span>
    </div>
  </div>
  <div id='main'>
    <div id="hmdyh_header">
      <h4>黑名单用户</h4>
    </div>
      <div class="clear">
        <div id='opera'>
          <button type="button" data-toggle="modal" data-target="#hmdyh_add" onclick="add_hmdyh()">新增黑名单</button>
          <button type="button" data-toggle="modal" data-target="#hmdyh_del" onclick="dels_hmdyh()" id="del_all">批量删除</button>
        </div>
        <div id='enquiry'>
          <input type="text" placeholder="输入关键词">
          <button>查询</button>
        </div>
      </div>
      <table id="hmdyh_table">
        <thead>
            <tr>
                <th><input type="checkbox" name="check_all" id="" onclick="del_color_2()"></th>
                <th>借阅卡号</th>
                <th>借阅人</th>
                <th>身份证号码</th>
                <th>手机号码</th>
                <th>性别</th>
                <th>借阅次数</th>
                <th>借阅册数</th>
                <th>最新借阅日期</th>
                <th>罚单次数</th>
                <th>罚单金额</th>
                <th>超期还书次数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
      </table>
      <div id="page_div" class="clearfix">
        <div id="hmdyh_page" class="clearfix">
        </div>
      </div>
    </div>
  <div class="modal fade" id="hmdyh_add" tabindex="-1" role="dialog" aria-labelledby="hmdyh_add_Label">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="hmdyh_add_Label">新增黑名单</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group form-inline">
              <label>用户名:</label>
              <input type="text" class="form-control" id="hmdyh_add_1">
            </div>
            <div class="form-group form-inline"> 
              <label>借阅卡号:</label>
              <input type="text" class="form-control" id="hmdyh_add_2">
            </div>
            <div class="form-group form-inline">
              <label>超期天数:</label>
              <input type="text" class="form-control" id="hmdyh_add_3">
            </div>
            <div class="form-group form-inline">
              <label>罚款金额:</label>
              <input type="text" class="form-control" id="hmdyh_add_4">
            </div>
            <div class="form-group form-inline">
              <label>丢失图书:</label>
              <input type="text" class="form-control" id="hmdyh_add_5">
            </div>
            <div class="form-group form-inline">
              <label>超期还书次数:</label>
              <input type="text" class="form-control" id="hmdyh_add_6">
            </div>
            <div class="form-group form-inline">
              <label>借阅册数:</label>
              <input type="text" class="form-control" id="hmdyh_add_7">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="T_add_hmdyh()">确认</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="hmdyh_change" tabindex="-1" role="dialog" aria-labelledby="hmdyh_change_Label">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="hmdyh_change_Label">编辑黑名单</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group form-inline">
              <label>用户名:</label>
              <input type="text" class="form-control" id="hmdyh_change_1" readonly="readonly">
            </div>
            <div class="form-group form-inline">
              <label>借阅卡号:</label>
              <input type="text" class="form-control" id="hmdyh_change_2" readonly="readonly">
            </div>
            <div class="form-group form-inline">
              <label>超期天数:</label>
              <input type="text" class="form-control" id="hmdyh_change_3">
            </div>
            <div class="form-group form-inline">
              <label>罚款金额:</label>
              <input type="text" class="form-control" id="hmdyh_change_4">
            </div>
            <div class="form-group form-inline">
              <label>丢失图书:</label>
              <input type="text" class="form-control" id="hmdyh_change_5">
            </div>
            <div class="form-group form-inline">
              <label>超期还书次数:</label>
              <input type="text" class="form-control" id="hmdyh_change_6">
            </div>
            <div class="form-group form-inline">
              <label>借阅册数:</label>
              <input type="text" class="form-control" id="hmdyh_change_7">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="T_change_hmdyh()">确认</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="hmdyh_del" tabindex="-1" role="dialog" aria-labelledby="hmdyh_del_Label">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="hmdyh_del_Label">操作确认</h4>
        </div>
        <div class="modal-body" id="del_h">
        </div>
        <div class="modal-footer" id="del_f">
        </div>
      </div>
    </div>
  </div>
<script>
    /* nav导航jq */
    let h = $(window).height()
    $('#naviga').css({
      'height': h + 'px',
    })
    $('.menu>li:first-child').on('click', function () {
      pullDown($(this))
    })
    $('.menu>li:first-child').siblings().on('click', function () {
      jumpPage($(this))
    })
    /* 动态渲染页码添加点击事件， */
    $('#hmdyh_page').on('click','.page_style',function(e) {
        now_page = parseInt($(this).text())
        page_turn(now_page , pageData)
    })
    /* 动态渲染每页显示条数按钮添加点击事件，并重新渲染页面 */
    $('#hmdyh_page').on('click','.menuPage',function(e) {
        page_num = this.value
        show(1)
    })
    /* 表头多选框添加点击事件 */
    $('input[name="check_all"]').on("click",function(){
        if($(this).is(':checked')){
            $('input[name="box_s"]').each(function(){
                $(this).prop("checked",true)
            })/* 本身为点击true状态时，name=box_s的多选框，状态改为点击true */
        } else {
            $('input[name="box_s"]').each(function(){
                $(this).prop("checked",false)
            })/* 反之，name=box_s的多选框，状态改为未点击false */
        }
    })
    show(1)
</script>
</body>
</html>                             